<template>
	<view>
		<view class="wrap">
			<view class="txt">
				提现金额：
			</view>
			<input type="digit" v-model="num" :placeholder="placeholder" />
		</view>
		
		
		<form @submit='putwallet' report-submit='true' >
			<view class="btn">
				<!-- 获取formid -->
				<button  class="absolute" form-type='submit'></button>
				<view class="sub">立即提现</view>
		
			</view>
		</form>
		

		<view class="wraplist">
			<view class="title">
				提现记录
			</view>
			<!-- 提现记录 -->
			<view v-if="walletlist.length">
				<view class="list" v-for="(item,index) in walletlist" :key="index">
					<cmd-cell-item :title="item.price" :brief="item.time" :addon="item.operation" />
				</view>
			</view>
			<view v-else class="nodata">
				<view class="fonticon icon">
					&#xe602;
				</view>
				<view class="txt">
					暂无订单记录
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import cmdCellItem from '@/components/cmd-cell-item/cmd-cell-item.vue'
	// 接口相关
	import _function from '@/common/_function.js'
	import api from '@/common/api.js'

	export default {
		components: {
			cmdCellItem
		},
		data() {
			return {
				num: null,
				walletlist: [],
				placeholder: '',
				price:'',//剩余金额
			};
		},

		methods: {
			// 提现
			async putwallet(e) {
				console.log(typeof this.num)
				
				// 给服务端发送formid
				_function.request(api.formid,{
					formid:e.detail.formId
				},'POST')
				if(this.num=='.'){
					uni.showToast({
						title: '请输入提现金额',
						duration: 2000,
						icon: 'none'
					})
					return false
				}
				if(this.num==null){
					uni.showToast({
						title: '请输入提现金额',
						duration: 2000,
						icon: 'none'
					})
					return false
				}
				if(!this.num){
					uni.showToast({
						title: '请输入提现金额',
						duration: 2000,
						icon: 'none'
					})
					return false
				}
				if(parseFloat(this.num)<1){
					uni.showToast({
						title: '提现金额不能低于1元',
						duration: 2000,
						icon: 'none'
					})
					return false
				}
				
				
				if(this.num>this.price){
					uni.showToast({
						title: '提现金额大于可提现金额',
						duration: 2000,
						icon: 'none'
					})
					return false
				}
				
				uni.showLoading({
				    title: '申请提现中...',
					mask:true
				})
				
				const res = await _function.request(api.putwallet, {
					balance: this.num
				}, 'POST')
				if (res.data.code) {
					uni.hideLoading()
					this.num=null
					this.getcommission()
					this.getcommissionlist()
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					})
				}
			},
			
			
			async getcommission(){
				const res = await _function.request(api.getcommission)
				if (res.data.code == 200) {
					this.placeholder = '当前可提现余额为' + res.data.data
					this.price = res.data.data
				}
			},
			
			// 获取提现列表
			async getcommissionlist(){
				const res = await _function.request(api.walletlist)
				if (res.data.code == 200) {
					if (res.data.data != "null") {
						this.walletlist = res.data.data
					}
				} else {
					uni.showToast({
						title: '获取数据失败',
						duration: 2000,
						icon: 'none'
					})
				}
			}
		},

		async onLoad() {
			this.getcommission()
			this.getcommissionlist()
		}
	}
</script>

<style lang="scss">
	.wrap {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #E2E4EA;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		input{
			flex: 1;
		}
	}

	.btn {
		padding: 20rpx;
		position:relative;

		.sub {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 70rpx;
			background-color: #0081FF;
			color: #fff;
			border-radius: 20rpx;
		}
	}

	.wraplist {
		padding: 20rpx;
		box-sizing: border-box;
		background-color:#fff;
		.title {
			font-size: 32rpx;
			padding: 20rpx;
			border-bottom: 2rpx solid #C5CAD5;
		}
	}

	.nodata {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {
			font-size: 80rpx;
		}

		.txt {
			font-size: 40rpx;
		}
	}
</style>
